<template>
  <div class="order">
    <van-nav-bar :title="title" left-arrow @click-left="$router.replace('/user')" fixed/>
    <div class="orderList" style="margin-top: 30px;">
      <OrderListItem v-for="(item,index) in OrderList" :key="index" :item="item" @changeList="goChange"></OrderListItem>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import OrderListItem from '@/components/OrderListItem.vue'
import request from '@/utils/request'

export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  data () {
    return {
      baseOrder: '/order-basic',
      SearchOrderVo: {
        number: '',
        orderStatus: ''
      },
      OrderDetailList: [],
      orderType: [
        {
          value: 1,
          label: '已支付'
        },
        {
          value: 2,
          label: '已发货'
        },
        {
          value: 3,
          label: '已完成'
        }
      ],
      OrderList: [],
      title: '全部订单'
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async searchOrderByConditions () {
      this.SearchOrderVo.orderStatus = this.SearchOrderVo.orderStatus === '' ? 0 : this.SearchOrderVo.orderStatus
      await request({
        url: this.baseOrder + '/order-list/1/1000',
        method: 'get',
        params: this.SearchOrderVo
      }).then(res => {
        if (res.data.data.data !== null) {
          this.OrderDetailList = res.data.data.data
          this.transformOrderToDetail()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    transformOrderToDetail () {
      const xx = []
      this.OrderDetailList.forEach(item => {
        const orderDetail = {
          id: 0,
          number: '',
          orderStatus: '',
          username: '',
          phone: '',
          address: '',
          totalMoney: 0,
          createUser: '',
          createDate: new Date(),
          updateUser: '',
          updateDate: new Date(),
          orderDetail: []
        }
        orderDetail.id = item.id
        orderDetail.number = item.number
        orderDetail.username = item.addressBook.name
        orderDetail.phone = item.addressBook.phone
        orderDetail.address = item.addressBook.provinceName + item.addressBook.cityName + item.addressBook.districtName + ' ' + item.addressBook.detail
        orderDetail.totalMoney = item.totalMoney
        orderDetail.createUser = item.createUser
        orderDetail.createDate = item.createDate
        orderDetail.updateUser = item.updateUser
        orderDetail.updateDate = item.updateDate
        orderDetail.orderDetail = JSON.parse(item.orderDetail)
        orderDetail.orderStatus = this.changeStatusTostring(item.orderStatus)
        xx.push(orderDetail)
      })
      this.OrderList = xx
    },
    changeStatusTostring (order) {
      let label = ''
      this.orderType.forEach(item => {
        if (item.value === order) {
          label = item.label
        }
      })
      return label
    },
    goChange () {
      this.SearchOrderVo.orderStatus = 3
      this.searchOrderByConditions()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    if (typeof this.$route.query.status !== 'undefined') {
      this.SearchOrderVo.orderStatus = this.$route.query.status
      if (this.$route.query.status === '1') {
        this.title = '已支付订单'
      } else if (this.$route.query.status === '2') {
        this.title = '已发货订单'
      } else if (this.$route.query.status === '3') {
        this.title = '已完成订单'
      }
    }
    this.searchOrderByConditions()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.searchOrderByConditions()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.order {
  ::v-deep {
    .van-nav-bar__arrow {
      color: #333;
    }
  }
  background-color: #fafafa;
}
</style>
